/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'

export default class List extends Component {

    state = {//    初始化状态
        //users值为数组
         users:[],
         isFirst:true, //是否为第一次打开页面
         isLoading:false, //标识是否处于加载中
         err:'' //存储请求相关的错误信息
       }

      componentDidMount(){
     this.token = PubSub.subscribe('searchName',(_,stateObj)=>{
            this.setState(stateObj)
        })
    }
    componentWillUnmount(){
        PubSub.onsubscribe(this.token)
    }


    render() {
        const {isLoading,users,isFirst,err} = this.state;
        return (
            <div className="row">
              {
                  isFirst ? <h2>欢迎使用,输入关键字,随后点击搜索</h2> : 
                  isLoading? <h2>Loading...</h2> :
                  err  ?  <h2 style={{color:'red'}}>{err}</h2> :
                  users.map((userObj) => {
                  return(
                  <div className="card" key={userObj.id}>
                    <a href={userObj.html_url} target="_blank" rel="noreferrer">
                        <img alt="head_picture" src={userObj.avatar_url} style={{width:'100px'}}/>
                    </a>
                    <p className="card-text">{userObj.login}</p>
                  </div>
                  )
                  })
              }
           
          </div>
        )
    }
}
